| vue项目 | 您所在的位置：网站首页 › 设备资产管理系统 开源方案怎么写 › vue项目 |
vue项目
|
项目名称
XX资产管理系统
前端技术栈
HTML/css/javascriptvue/node.js/ES6网络请求原理
对vue的要求略高，其他技术会用就行 项目运行环境 node版本 v10.15.2 (10以下不能运行)vue版本 3.7.0 vue项目运行依赖 axios 基于promise用于浏览器和node.js的http客户端https://www.kancloud.cn/yunye/axios/234845 v-charts 基于echarts的图表https://v-charts.js.org/#/ element-ui 饿了么开发的开源桌面端组件库https://element.eleme.cn/#/zh-CN vue-router vue.js的官方路由管理器，方便构建单页面应用https://router.vuejs.org/zh/ Vue项目的开发流程，如下： 利用命令行工具创建项目项目开发前配置项目开发阶段项目打包与优化阶段项目上线主要在这里我会详细阐述登录页面和首页，数据页 目录结构
目录结构说明 │ ├── node_modules/ # 自动生成，包含Node生产依赖以及开发依赖 │ ├── public/ # 纯静态资源，不会被wabpack构建。 │ ├── index.html # 入口页面 │ └── favicon.ico # 网站站标 │ ├── src/ # 项目源码目录 │ ├── main.js # 入口js文件 │ ├── app.vue # 根组件 │ ├── components # 公共组件目录 (可自由定义) │ │ ├── dashboard # 仪表盘组件存放目录 │ │ ├── heard-box # 头组件存放目录 │ │ ├── others # 其他组件存放目录 │ │ └── registration # 资产登记存放目录 │ ├── views/ # 页面目录 │ │ ├── aside-left # 侧边栏页面存放目录 │ │ ├── login.vue │ │ └── indexPage.vue │ ├── assets/ # 资源目录，这里的资源会被wabpack构建 │ │ └── images/ │ │ └── logo.png │ ├── routes/ # 前端路由 │ │ └── index.js │ └── store/ # 应用级数据（state） │ └── index.js │ ├── .gitignore # git排除文件 │ ├── babel.config.js │ ├── vue.config.js # vue配置文件 │ ├── package.json # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息 │ └── README.md 登录页面的构建以及表单验证login.vue 所有的vue文件都是由结构，样式，逻辑组成。template存放结构，style存放样式，script存放逻辑 tips: 所有以el开头的都是element-ui组件库的内容，大部分直接套过来用就行，建议先把element-ui组件库的内容看一遍，再来看代码就没啥问题了 难点：表单验证 难度系数：一颗星 用户登录 登陆 export default { data() { return { numberValidateForm: { name: "", pass: "" } }; }, // 验证成功后通过切换路由的方式进行页面切换 this.$router.push会向history栈添加一条记录，所以可以点击回退 // 调用 Message 或 this.$message 会返回当前 Message 的实例 methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$router.push({name:'indexPage'}) } else { // error为消息提示的样式 this.$message.error('傻玩意，滚去工作'); } }); } } }; .bgimg { width: 100%; height:100%; background: url("../assets/login01.jpg") no-repeat; background-size: 100%; } .box { width: 550px; height: 226px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: flex; justify-content: center; flex-direction: row; color: aliceblue; } .left { width: 240px; height: 100%; border-right: 1px solid hsla(0, 0%, 100%, 0.2); } .left img { width: 230px; margin-top: 20px; } .right { width: 280px; margin-left: 26px; } .right input { display: block; } .right h3 { font-weight: 400; margin: 0; padding: 0; line-height: 40px; } 首页indexPage.vue
主页布局： 侧边栏部分：每一栏都是一个页面 头部：组件 main：对应着侧边栏页面内容 默认显示仪表盘的内容 tips: 这部分内容较为庞大，请做好心理准备。 难点： 组件化思想 | 路由使用 难度系数： 三颗星|两颗星 丁艾资产 {{v.meta.title}} {{ v.meta.title }} {{item.meta.title}} |
【本文地址】
公司简介
联系我们